UI overhaul: larger board, slide-down SQL log, move sounds, sample query#3
Merged
UI overhaul: larger board, slide-down SQL log, move sounds, sample query#3
Conversation
…sounds
- CSS: --board-sz variable (clamp 320px, 50vw, 760px); player bars/controls
follow the same size; responsive breakpoints updated in-place
- Animation: fadeSlideIn now slides DOWN (translateY -8px → 0)
- SQL ordering: new blocks are prepended so each submitted query pushes
older content downward; game-init SQL is appended at the end (atEnd=true)
so it stays at the bottom ('at the end') after scrolling
- Undo now removes firstChild (most-recent prepended block)
- Auto-scroll scrolls to scrollTop=0 to reveal latest block at top
- Sounds: Web Audio API playSound('move'|'capture'|'check') with AudioContext
singleton; called in executeMove()
- Sample query: textarea pre-filled on game start; ⚑ Sample button added
- HTML: ⚑ Sample button wired in sql-input-actions
Agent-Logs-Url: https://github.com/Devn913/SQL_Chess/sessions/d99e2bd3-f90d-47a3-9be1-466c214ff74b
Co-authored-by: Devn913 <56478595+Devn913@users.noreply.github.com>
…lags, add auto-scroll for atEnd blocks Agent-Logs-Url: https://github.com/Devn913/SQL_Chess/sessions/d99e2bd3-f90d-47a3-9be1-466c214ff74b Co-authored-by: Devn913 <56478595+Devn913@users.noreply.github.com>
Copilot created this pull request from a session on behalf of
Devn913
April 21, 2026 07:31
View session
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The chess board was undersized (capped at 460 px), new SQL blocks animated upward and stacked in chronological-top order making the log hard to follow, there was no audible feedback on moves, and no visible sample query for new users.
Changes
Board & layout
--board-sz: clamp(320px, 50vw, 760px)CSS variable — board is now ≥ 50 % of viewport width on typical screensmax-widthall reference--board-szso the surrounding chrome scales with the board--board-szin-place (no duplicated pixel values)SQL query log ordering & animation
appendSQLnow prepends move blocks so each new query pushes older ones downward; auto-scroll jumps toscrollTop = 0to surface the latest entryfadeSlideIndirection reversed:translateY(-8px → 0)— blocks slide in from above, reinforcing the downward flowCREATE TABLE/INSERTsetup) is appended withatEnd = true, landing permanently at the bottom — visible only after scrolling, keeping the initial view unclutteredfirstChild(most-recent prepended block) instead oflastChildSample move query
SAMPLE_SQL_QUERYconstant (single source of truth)sqlInputHasTemplate = trueso the first board-click move auto-clears itMove sounds
playSound(type)via Web Audio API — singletonAudioContext, no external depsexecuteMove()before SQL generation